<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>${applicationScope.appTitle}-后台管理系统</title>
    <link rel="stylesheet" href="<c:url value="/assets/css/output.css"/>"/>
</head>
<body class="font-sans antialiased bg-gray-100 select-none">
<!-- 顶部导航栏 -->
<header class="bg-gray-900 text-white px-6 py-3 flex justify-between items-center sticky top-0 z-10">
    <h1 class="text-xl font-bold">${applicationScope.appTitle}-后台管理</h1>
    <div class="relative inline-block text-left">
        <button id="accountDropdownButton" class="inline-flex items-center focus:outline-none">
<%--            账号: <%=loginUser%>--%>
            <svg class="ml-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                 xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
            </svg>
        </button>
        <!-- 下拉菜单 -->
        <div class="origin-top-right absolute right-0 mt-2 w-32 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none hidden"
             role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
            <div class="py-1" role="none">
                <a href="<%=request.getContextPath()%>/auth/logout"
                   class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 mx-auto">退出</a>
            </div>
        </div>
    </div>
</header>

<!-- 主体内容 -->
<main class="flex h-screen">
    <!-- 侧边栏 -->
    <aside class="bg-gray-800 text-white w-64 min-h-full px-4 py-8 overflow-y-auto">
        <ul class="space-y-2">
            <li><a href="#page-management" class="block px-4 py-2 text-sm hover:bg-gray-700">页面管理</a></li>
            <li><a href="#user-management" class="block px-4 py-2 text-sm hover:bg-gray-700">用户管理</a></li>
            <li><a href="#personal-info" class="block px-4 py-2 text-sm hover:bg-gray-700">个人信息</a></li>
        </ul>
    </aside>
    <!-- 右侧内容区 -->
    <section class="flex-1 p-2">
        <!-- 动态内容区域，这里使用JSP include示例 -->
        <div id="contentArea">
            <!-- 页面管理内容 -->
            <div id="page-management" class="hidden">
                <jsp:include page="pages/images_management.jsp"/>
            </div>
            <!-- 个人信息内容 -->
            <div id="personal-info" class="hidden">
                <jsp:include page="pages/personal_info_form.jsp"/>
            </div>
            <!-- 用户管理内容 -->
            <div id="user-management" class="hidden">
                <jsp:include page="pages/user_management_table.jsp"/>
            </div>
        </div>
    </section>
</main>

<!-- 尾部脚本，用于简单的交互逻辑 -->
<script>
    document.querySelectorAll('aside a').forEach(link => {
        link.addEventListener('click', e => {
            e.preventDefault();
            const target = document.getElementById(e.target.getAttribute('href').slice(1));
            document.querySelectorAll('#contentArea > div').forEach(div => div.classList.add('hidden'));
            target.classList.remove('hidden');
        });
    });

    // 点击账号按钮显示下拉菜单
    document.getElementById('accountDropdownButton').addEventListener('click', function () {
        this.nextElementSibling.classList.toggle('hidden');
    });
</script>

</body>
</html>